<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <el-main class="formC">
          <el-descriptions :column="2" border>
            <el-descriptions-item>
              <template slot="label">
                资产编号
              </template>
              {{info.assetNumMaster}}<span v-if="info.assetNumAttached">-{{info.assetNumAttached}}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                自定义编号
              </template>
              {{info.assetCustomNum}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                资产状态
              </template>
              <dict-tag :options="dict.type.asset_status" :value="info.assetStatus"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                资产名称
              </template>
              {{info.assetName}}
            </el-descriptions-item>
            <el-descriptions-item span="2">
              <template slot="label">
                资产地点
              </template>
              {{info.assetAddressDistrict}}{{info.assetAddress}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                门牌号
              </template>
              <span v-if="info.assetDoorNum">{{info.assetDoorNum}}号</span>
              <span v-if="info.assetUnitNum">{{info.assetUnitNum}}单元</span>
              <span v-if="info.assetRoomNum">{{info.assetRoomNum}}室</span>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                房屋类型
              </template>
              <dict-tag :options="dict.type.asset_house_type" :value="info.assetHouseType"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                资产面积
              </template>
              {{info.assetArea || 0}}㎡
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                账面原值
              </template>
              {{info.assetOriginalValue}}万元
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                建成年代
              </template>
              {{info.assetEstablishDate}}年
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                产权年限
              </template>
              <dict-tag :options="dict.type.age_limit" :value="info.assetOwnershipLength"/>
            </el-descriptions-item>
            <el-descriptions-item span="2">
              <template slot="label">
                产权单位
              </template>
              <dict-tag :options="dict.type.property_unit" :value="info.assetPropertyUnit"/>
            </el-descriptions-item>
            <el-descriptions-item span="2">
              <template slot="label">
                备注
              </template>
              {{info.assetRemark}}
            </el-descriptions-item>
            <el-descriptions-item span="2">
              <template slot="label">
                图片
              </template>
              <div v-if="info.assetImg">
                <image-preview v-for="src in info.assetImg.split(',')" :width="90" :height="90" :src="src" style="margin-right: 10px"></image-preview>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </el-main>
      </el-tab-pane>
      <el-tab-pane label="在租信息" name="second">
        <el-main class="formC">
          <el-descriptions v-if="Object.keys(this.lease).length > 0" :column="2" border>
            <el-descriptions-item>
              <template slot="label">
                租赁编号
              </template>
              {{lease.leaseCode}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                租赁时间
              </template>
              {{lease.leaseStartDate}}至{{lease.leaseEndDate}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                客户编号
              </template>
              {{lease.customerCode}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                客户名称
              </template>
              {{lease.customerName}}
            </el-descriptions-item>
            <el-descriptions-item >
              <template slot="label">
                联系人
              </template>
              {{lease.customerLinkman}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系电话
              </template>
              {{lease.customerPhone1}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                租金
              </template>
              {{lease.leaseRent}}元
            </el-descriptions-item>
<!--            <el-descriptions-item span="2">-->
<!--              <template slot="label">-->
<!--                备注-->
<!--              </template>-->
<!--              {{lease.leaseRemark}}-->
<!--            </el-descriptions-item>-->
<!--            <el-descriptions-item span="2">-->
<!--              <template slot="label">-->
<!--                图片-->
<!--              </template>-->
<!--              <div v-if="lease.leaseImg">-->
<!--                <image-preview v-for="src in lease.leaseImg.split(',')" :width="90" :height="90" :src="src" style="margin-right: 10px"></image-preview>-->
<!--              </div>-->
<!--            </el-descriptions-item>-->
          </el-descriptions>
          <el-empty v-else description="暂无在租信息"></el-empty>
        </el-main>
      </el-tab-pane>
      <el-tab-pane label="历史租赁" name="third">
        <el-main class="formC">
          <el-collapse v-model="activeNames" v-if="history.length > 0">
            <el-collapse-item v-for="(item, index) in history" :title="item.leaseCode + '-' + item.customerName" :key="index" :name="index">
              <el-descriptions :column="2" border>
                <el-descriptions-item>
                  <template slot="label">
                    租赁编号
                  </template>
                  {{item.leaseCode}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    租赁时间
                  </template>
                  {{item.leaseStartDate}}至{{item.leaseEndDate}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    客户编号
                  </template>
                  {{item.customerCode}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    客户名称
                  </template>
                  {{item.customerName}}
                </el-descriptions-item>
                <el-descriptions-item >
                  <template slot="label">
                    联系人
                  </template>
                  {{item.customerLinkman}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    联系电话
                  </template>
                  {{item.customerPhone1}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    租金
                  </template>
                  {{item.leaseRent}}元
                </el-descriptions-item>
<!--                <el-descriptions-item span="2">-->
<!--                  <template slot="label">-->
<!--                    备注-->
<!--                  </template>-->
<!--                  {{item.leaseRemark}}-->
<!--                </el-descriptions-item>-->
<!--                <el-descriptions-item span="2">-->
<!--                  <template slot="label">-->
<!--                    图片-->
<!--                  </template>-->
<!--                  <div v-if="item.leaseImg">-->
<!--                    <image-preview v-for="src in item.leaseImg.split(',')" :width="90" :height="90" :src="src" style="margin-right: 10px"></image-preview>-->
<!--                  </div>-->
<!--                </el-descriptions-item>-->
              </el-descriptions>
            </el-collapse-item>
          </el-collapse>
          <el-empty v-else description="暂无租赁历史记录"></el-empty>
        </el-main>
      </el-tab-pane>
      <el-tab-pane label="保养维修工单" name="forth">
        <el-empty description="暂无历史记录"></el-empty>
      </el-tab-pane>
      <el-tab-pane label="巡检工单" name="fifth">
        <el-empty description="暂无历史记录"></el-empty>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { getAssetInfoBaseInfo, getAssetInfoHistoryLeaseInfo, getAssetInfoLeaseInfo } from '@/api/business/assetInfo'
export default {
  name: "info",
  dicts: ['asset_status', 'asset_house_type', 'property_unit', 'customer_lease_status', 'age_limit'],
  data() {
    return {
      info: {},
      history: [],
      lease: {},
      id: null,
      activeName: 'first',
      activeNames: []
    }
  },
  created() {
    this.id = this.$route.params && this.$route.params.id;
    if(this.id) {
      this.getAssetInfo()
      this.getLeaseInfo()
      this.getHistoryLeaseInfo()
    }

  },
  methods: {
   // 资产基本信息
    getAssetInfo() {
      getAssetInfoBaseInfo(this.id).then(r => {
        this.info = r.data
      })
    },
    // 在租信息
    getLeaseInfo() {
      getAssetInfoLeaseInfo(this.id).then(r => {
        this.lease = r.data
      })
    },
    // 历史租赁信息
    getHistoryLeaseInfo() {
      getAssetInfoHistoryLeaseInfo(this.id).then(r => {
        this.history = r.data
      })
    },
  }
}
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 84px);
}
.formC {
  width: 100%;
  padding: 0 50px;
  height: calc(100vh - 170px);
  overflow-y: auto;
}
</style>
